<!DOCTYPE html>
<html lang="en" data-th-fragment="header">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
<!-- CSRF -->
<meta name="_csrf" th:content="${_csrf.token}"/>
<!-- default header name is X-CSRF-TOKEN -->
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>

<!-- Tether core CSS -->
<link href="../../css/tether.min.css" th:href="@{/css/tether.min.css}"
	rel="stylesheet">

<!-- Bootstrap CSS -->
<link href="../../css/bootstrap.min.css"
	th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

<!-- Font-Awesome CSS -->
<link href="../../css/font-awesome.min.css"
	th:href="@{/css/font-awesome.min.css}" rel="stylesheet">

<!-- NProgress CSS -->
<link href="../../css/nprogress.css" th:href="@{/css/nprogress.css}"
	rel="stylesheet">

<!-- thinker-md CSS -->
<link href="../../css/thinker-md.vendor.css"
	th:href="@{/css/thinker-md.vendor.css}" rel="stylesheet">

<!-- bootstrap tags CSS -->
<link href="../../css/bootstrap-tagsinput.css"
	th:href="@{/css/jquery.tagsinput.min.css}" rel="stylesheet">

<!-- bootstrap chosen CSS -->
<link href="../../css/component-chosen.min.css"
	th:href="@{/css/component-chosen.min.css}" rel="stylesheet">

<!-- toastr CSS -->
<link href="../../css/toastr.min.css" th:href="@{/css/toastr.min.css}"
	rel="stylesheet">

<!-- jQuery image cropping plugin CSS -->
<link href="../../css/cropbox.css" th:href="@{/css/cropbox.css}"
	rel="stylesheet">

<!-- Custom styles -->
<link href="../../css/style.css" th:href="@{/css/style.css}"
	rel="stylesheet">
<link href="../../css/thymeleaf-bootstrap-paginator.css"
	th:href="@{/css/thymeleaf-bootstrap-paginator.css}" rel="stylesheet">
<link href="../../css/blog.css" th:href="@{/css/blog.css}" rel="stylesheet">
	
<link href="../../layui/css/layui.css" th:href="@{/layui/css/layui.css}" rel="stylesheet">

<style type="text/css">
    .blog-nav-iten{
        position:relative;
        display:inline-block;
        *display:inline;
        *zoom:1;
        vertical-align:middle;
        line-height:60px
    }
    .blog-header-logo{
       width:140px;
       height: 55px;
    }
    .blog-header-item{
        padding-right: 10px;
        padding-left: 10px;
        font-size: 18px;    
    }
</style>

</head>
<body>
	<ul class="layui-nav">
        <div style="text-align: center;">
            <li class="blog-nav-iten">
                <a href="/"><img src="/img/login.png" class="blog-header-logo"/></a>
            </li>
            <li class="layui-nav-item ">
                <a href="javascript:void(0)" th:attr="url='/blogs?order=new'" class="blog-header-item" style="padding-right: 10px;padding-left: 10px;font-size: 18px;">最新</a>
            </li>
            <li class="layui-nav-item" >
                <a href="javascript:void(0)" th:attr="url='/blogs?order=hot'" class="blog-header-item" style="padding-right: 10px;padding-left: 10px;font-size: 18px;">最热</a>
            </li>
            <li class="blog-nav-iten">
                <input type="text" name="title" placeholder="搜索" class="layui-input">
            </li>
            <li class="blog-nav-iten" style="margin-right: 500px;">
                <button class="layui-btn layui-icon-search layui-icon">搜索</button>
            </li>
            <span sec:authorize="isAuthenticated()">
	            <li class="layui-nav-item">
	                <a href="javascript:;">产品</a>
	                <dl class="layui-nav-child">
	                    <dd><a href="/u/${#authentication.principal.username}}"
								th:href="@{'/u/' + ${#authentication.principal.username}}">个人主页</a></dd>
	                    <dd><a href="/u/${#authentication.principal.username}}/profile"
								th:href="@{'/u/' + ${#authentication.principal.username}} + '/profile'">个人设置</a></dd>
	                </dl>
	            </li>
	            <li class="blog-nav-iten">
					<form action="/logout" th:action="@{/logout}" method="post">
	                <a class="layui-btn layui-icon layui-icon-username" href="/u/${#authentication.principal.username}}/blogs/edit"
							th:href="'/u/' + ${#authentication.principal.username} + '/blogs/edit'">写博客</a>
					     <input class="layui-btn layui-icon-user layui-icon" type="submit" value="退出">
					</form>
<!-- 	                <a class="layui-btn layui-icon-user layui-icon" href="/register">注册</a> -->
	            </li>
            </span>
            <span sec:authorize="isAnonymous()">
	            <li class="blog-nav-iten">
	                <a class="layui-btn layui-icon layui-icon-username" href="/login">登录</a>
	                <a class="layui-btn layui-icon-user layui-icon" href="/register">注册</a>
	            </li>
            </span>
        </div>
    </ul>
    
    <script src="../../layui/layui.js" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript">
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
    </script>
</body>
</html>